<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="config.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
	<link rel="stylesheet" href="${ctx}/ztree/css/zTreeStyle.css" type="text/css"></link>
	<link href="${ctx}/css/type.css" rel="stylesheet" />
	<script type="text/javascript" src="${ctx}/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="${ctx}/ztree/js/jquery.ztree.core-3.5.js"></script>
</head>
<body>
	<div class="handler3">
		<div class="handler3_1">
					<div class="handler3_1_1"></div>
					<div class="handler3_1_2">
						选购的商品共<span id="type_num">&nbspx&nbsp</span>种<span id="type_sum">&nbspx&nbsp</span>件<br/>
						总计：<span>￥0</span>	<br/>
						&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
						<a href="#">进入购物车</a>				
					</div>
		</div>
		<div class="handler3_2">
			<div class="handler3_2_1">商品类别</div>
					<div class="handler3_2_2 box">
						<ul id="tree" class="ztree"></ul>
<!-- 							<p><a href="#"><span>计算机</span></a></p> -->
<!-- 							<p><a href="#"><span>平板电脑</span></a></p> -->
<!-- 							<p><a href="#"><span>笔记本电脑</span></a></p> -->
<!-- 							<p><a href="#"><span>台式电脑</span></a></p> -->
<!-- 							<p><a href="#"><span>数码产品</span></a></p> -->
<!-- 							<p><a href="#"><span>数码摄像机</span></a></p> -->
<!-- 							<p><a href="#"><span>数码照相机</span></a></p> -->
					</div>
		</div>
	</div>
</body>
	<script type="text/javascript">
		//设置ztree的结构
	      var setting = {
	    	data:{simpleData:{enable:true,idKey:"id",pIdKey: "pId",rootPId: "0"},key: {isParent: "true"}},
	    	view:{showIcon:false},
		      callback:{onClick:function(event, treeId, treeNode){
					var id = treeNode.id == '0' ? '' :treeNode.id;
					if(treeNode.isParent){
						;
					} else
						var str = window.location.search;
						var keyWord = decodeURI(str.split("=")[1]);
						$.get(
							"index/littleType",
							{"littleType":id,"keyWord":keyWord},
							function(result){
								//刷新iframe页面
								window.parent.document.getElementById("rightIframe").src = window.parent.document.getElementById("rightIframe").src;
							}
								
						);
				}
			}
	      };
	
	    /*   var data = [
	    	  {
	              id: 1,
	              pId: 0,
	              name: "计算机",
	              open:true,//该节点默认打开
	          },
	          {
	              id: 11,
	              pId: 1,
	              name: "台式电脑",
	              
	          },
	          {
	              id: 12,
	              pId: 1,
	              name: "笔记本电脑"
	          },
	          {
	              id: 13,
	              pId: 1,
	              name: "掌上电脑"
	          },
	          {
	              id: 2,
	              pId: 0,
	              name: "数码产品",
	              open:true,//该节点默认打开
	          },
	          {
	              id: 21,
	              pId: 2,
	              name: "数码摄像机",
	              
	          },
	          {
	              id: 22,
	              pId: 2,
	              name: "数码摄影机"
	          },
	          {
	              id: 23,
	              pId: 2,
	              name: "数码摄像头"
	          }  */
/* 	    	  {
	              id: 1,
	              pId: 0,
	              name: "父节点1",
	              open:true,//该节点默认打开
	          },
	          {
	              id: 11,
	              pId: 1,
	              name: "子节点1",
	              
	          },
	          {
	              id: 12,
	              pId: 1,
	              name: "子节点2"
	          } */
	      //];

 	      $(document).ready(function() {
	    	  $.getJSON("type/initType",function(data){//
		          $.fn.zTree.init($("#tree"), setting, data);
	    	  });//两行注释
	      }); 
	</script>
</html>